<template>
  <view class="settings-page">
    <!-- 通用设置 -->
    <view class="settings-section">
      <view class="section-title">通用设置</view>
      
      <view class="setting-item">
        <view class="setting-info">
          <text class="setting-label">图片质量</text>
          <text class="setting-desc">选择图片加载质量</text>
        </view>
        <picker 
          mode="selector" 
          :range="imageQualityOptions" 
          :value="imageQualityIndex"
          @change="onImageQualityChange"
        >
          <view class="setting-value">
            {{ imageQualityOptions[imageQualityIndex] }}
            <text class="arrow">></text>
          </view>
        </picker>
      </view>
      
      <view class="setting-item">
        <view class="setting-info">
          <text class="setting-label">自动播放</text>
          <text class="setting-desc">浏览时自动加载下一张</text>
        </view>
        <switch 
          :checked="settings.autoPlay" 
          @change="onAutoPlayChange"
          color="#007AFF"
        />
      </view>
      
      <view class="setting-item">
        <view class="setting-info">
          <text class="setting-label">WiFi 下自动加载</text>
          <text class="setting-desc">仅在 WiFi 环境下自动加载高清图</text>
        </view>
        <switch 
          :checked="settings.wifiOnly" 
          @change="onWifiOnlyChange"
          color="#007AFF"
        />
      </view>
    </view>
    
    <!-- 数据管理 -->
    <view class="settings-section">
      <view class="section-title">数据管理</view>
      
      <view class="setting-item" @click="clearCache">
        <view class="setting-info">
          <text class="setting-label">清除缓存</text>
          <text class="setting-desc">清除图片缓存数据</text>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="setting-item" @click="clearHistory">
        <view class="setting-info">
          <text class="setting-label">清除浏览历史</text>
          <text class="setting-desc">删除所有浏览记录</text>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="setting-item" @click="clearFavorites">
        <view class="setting-info">
          <text class="setting-label">清除收藏</text>
          <text class="setting-desc">删除所有收藏内容</text>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="setting-item danger" @click="clearAllData">
        <view class="setting-info">
          <text class="setting-label">清除所有数据</text>
          <text class="setting-desc">清除所有本地数据，此操作不可恢复</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>
    
    <!-- 关于 -->
    <view class="settings-section">
      <view class="section-title">关于</view>
      
      <view class="setting-item" @click="showAbout">
        <view class="setting-info">
          <text class="setting-label">关于我们</text>
          <text class="setting-desc">版本信息与应用介绍</text>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="setting-item" @click="showPrivacyPolicy">
        <view class="setting-info">
          <text class="setting-label">隐私政策</text>
          <text class="setting-desc">了解我们如何保护您的隐私</text>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="setting-item" @click="showUserAgreement">
        <view class="setting-info">
          <text class="setting-label">用户协议</text>
          <text class="setting-desc">查看使用条款</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>
    
    <!-- 版本信息 -->
    <view class="version-info">
      <text class="version-text">版本 1.0.0</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useImageStore } from '@/stores/image'
import { useSettingsStore } from '@/stores/settings'
import { saveUserSettings, getUserSettings, clearStorage, saveFavorites, saveViewHistory } from '@/utils/storage'

const imageStore = useImageStore()
const settingsStore = useSettingsStore()

const imageQualityOptions = ['标准', '高清', '原图']
const imageQualityIndex = ref(0)

const settings = reactive({
  autoPlay: false,
  wifiOnly: false,
  imageQuality: 'standard' // standard, hd, original
})

onMounted(() => {
  loadSettings()
})

function loadSettings() {
  const savedSettings = getUserSettings()
  if (savedSettings) {
    Object.assign(settings, savedSettings)
    // 根据图片质量设置索引
    const qualityMap = {
      standard: 0,
      hd: 1,
      original: 2
    }
    imageQualityIndex.value = qualityMap[settings.imageQuality] || 0
  }
}

function saveSettings() {
  saveUserSettings(settings)
  settingsStore.updateSettings(settings)
}

function onImageQualityChange(e) {
  imageQualityIndex.value = e.detail.value
  const qualityMap = ['standard', 'hd', 'original']
  settings.imageQuality = qualityMap[e.detail.value]
  saveSettings()
  
  uni.showToast({
    title: '设置已保存',
    icon: 'success',
    duration: 1500
  })
}

function onAutoPlayChange(e) {
  settings.autoPlay = e.detail.value
  saveSettings()
}

function onWifiOnlyChange(e) {
  settings.wifiOnly = e.detail.value
  saveSettings()
}

function clearCache() {
  uni.showModal({
    title: '清除缓存',
    content: '确定要清除所有图片缓存吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除缓存逻辑（这里可以调用缓存清理工具）
        uni.showToast({
          title: '缓存已清除',
          icon: 'success'
        })
      }
    }
  })
}

function clearHistory() {
  uni.showModal({
    title: '清除浏览历史',
    content: `确定要清除 ${imageStore.viewHistory.length} 条浏览记录吗？此操作不可恢复。`,
    success: (res) => {
      if (res.confirm) {
        imageStore.viewHistory = []
        saveViewHistory([])
        uni.showToast({
          title: '浏览历史已清除',
          icon: 'success'
        })
      }
    }
  })
}

function clearFavorites() {
  uni.showModal({
    title: '清除收藏',
    content: `确定要清除 ${imageStore.favorites.length} 个收藏吗？此操作不可恢复。`,
    success: (res) => {
      if (res.confirm) {
        imageStore.favorites = []
        saveFavorites([])
        uni.showToast({
          title: '收藏已清除',
          icon: 'success'
        })
      }
    }
  })
}

function clearAllData() {
  uni.showModal({
    title: '警告',
    content: '确定要清除所有数据吗？包括收藏、浏览历史、设置等所有内容，此操作不可恢复！',
    confirmColor: '#ff3b30',
    success: (res) => {
      if (res.confirm) {
        // 清除所有存储
        clearStorage()
        // 重置 store
        imageStore.favorites = []
        imageStore.viewHistory = []
        imageStore.currentCategory = 'all'
        // 重置设置
        Object.assign(settings, {
          autoPlay: false,
          wifiOnly: false,
          imageQuality: 'standard'
        })
        imageQualityIndex.value = 0
        
        uni.showToast({
          title: '所有数据已清除',
          icon: 'success',
          duration: 2000
        })
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      }
    }
  })
}

function showAbout() {
  uni.showModal({
    title: '关于我们',
    content: '美女看图小程序\n版本：1.0.0\n\n为您提供精美的图片浏览体验',
    showCancel: false,
    confirmText: '知道了'
  })
}

function showPrivacyPolicy() {
  uni.navigateTo({
    url: '/pages/privacy/privacy'
  })
}

function showUserAgreement() {
  uni.navigateTo({
    url: '/pages/agreement/agreement'
  })
}
</script>

<style scoped>
.settings-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

.settings-section {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  padding: 30rpx 20rpx 20rpx;
  font-size: 28rpx;
  color: #999;
  font-weight: 500;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  min-height: 100rpx;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item.danger .setting-label {
  color: #ff3b30;
}

.setting-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.setting-label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.setting-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
}

.setting-value {
  font-size: 28rpx;
  color: #999;
  display: flex;
  align-items: center;
}

.arrow {
  font-size: 28rpx;
  color: #ccc;
  margin-left: 10rpx;
}

.version-info {
  padding: 60rpx 0;
  text-align: center;
}

.version-text {
  font-size: 24rpx;
  color: #999;
}
</style>

